<template>
  <div style="position: relative;">
    <div class="ht-head-wrap">
      <div class="title-item"><router-link to="/administrative">县情概况</router-link></div>
      <div class="title-item title-item-active"><router-link to="/party">党建引领</router-link></div>
      <div class="ht-top"><div class="ht-title"></div></div>
      <div class="title-item "><router-link to="/econdev/">经济发展</router-link></div>
      <div class="title-item"><router-link to="/humanistic">人文旅游</router-link></div>
    </div>

    <div class="ht-content">
      <div class="content-left">
        <party-building-left></party-building-left>
      </div>
      <div class="content-middle">
        <!-- <iframe width="100%" height="100%" frameborder="0"  src='https://www.thingjs.com/pp/8c8b0c7f57a258af43e9a625'></iframe> -->
        <div class="party-build-base" style="top: 230px;">
          <label>党员人数</label>
          <span class="lcd-font">{{base.partyMember}}</span>
        </div>
        <div class="party-build-base" style="top: 350px;">
          <label>党组织数</label>
          <span class="lcd-font">{{base.partyOrganization}}</span>
        </div>
        <!-- <div class="party-build-base" style="top: 470px;">
          <label>新入党人数</label>
          <span>{{base.}}</span>
        </div> -->


        <div class="party-build-legend">
            <p class="party-dw"> <span ></span> 党委 </p>
            <p> <span style="background-color: #FF0000;"></span> 党总支 </p>
            <p> <span style="background-color: #FFCC00;"></span> 党支部 </p>
        </div>

        <div class="party-build-right">
          <el-row>
            <el-col :span="8">
              <div class="party-build-right-item">
                <label class="lcd-font">97.6%</label>
                <p>党课出勤率</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="party-build-right-item">
                <label class="lcd-font">81.2%</label>
                <p>在线学习率</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="party-build-right-item" style="border: 0;">
                <label class="lcd-font">94.6%</label>
                <p>考核优秀率</p>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="map-mask" style="pointer-events: none;"><img src="../../assets/imgs/v2/mask-v2.png" /></div>
      </div>
      <div class="content-right">
        <party-building-right></party-building-right>
      </div>
    </div>
  </div>
</template>

<script>

import PartyBuildingLeft from '@/views/party-building/party-building-left/party-building-left.vue';
import PartyBuildingRight from '@/views/party-building/party-building-right/party-building-right.vue';
import base from '../../../static/ht-party-base.json'

export default {
  data() {
    return {
      base:base
    };
  },
  components: {
    PartyBuildingLeft,
    PartyBuildingRight
  },
  methods: {},
  mounted() {}
};
</script>

<style scoped lang="scss" type="text/scss">
$content-lr-w: 610px;

.content-middle {
  // background-color: yellow;

  .party-build-base {
    width:358px;
    height:90px;
    background: url(../../assets/imgs/v2/mt-small.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 10;
    left: $content-lr-w + 120px;

    >label {
        font-size: 20px;
        margin-left: 30px;
        color: #6BEEFF;
        float: left;
        margin-top: 25px;
    }
    >span {
      float: right;
      font-size: 60px;
      color: #FFCC01;
      margin-right: 40px;
      margin-top: 22px;
    }
  }

  .party-build-legend {
    width:193px;
    height:200px;
    background-color: rgba(0,0,0,0.6);
    border-radius:6px;
    position: absolute;
    z-index: 10;
    left: $content-lr-w + 120px;
    bottom: 200px;

    > p {
      font-size: 24px;
      height: 66px;
      line-height:66px;
      >span {
        display: inline-block;
        width: 24px;
        height: 24px;
        border-radius:50%;
        margin:0 20px;
        vertical-align: middle;
      }
    }

    .party-dw {
      >span {
        background: url(../../assets/imgs/v2/flag.png) no-repeat;
        background-size: 100%;
        width: 36px;
        height: 36px;
        border-radius:0;
      }
    }
  }

  .party-build-right {
    width:900px;
    height:200px;
    background-color: rgba(4,9,47,0.6);
    border-radius:6px;
    position: absolute;
    z-index: 10;
    right: $content-lr-w + 100px;
    bottom: 200px;

    .party-build-right-item {
      text-align: center;
      height: 90px;
      margin-top: 55px;
      border-right:1px solid rgba(255,255,255,0.4);

      >label {
        font-size: 50px;
        color: #FFEA00;
        line-height: 60px;
      }
      >p {
        line-height: 30px;
        font-size: 28px;
      }
    }

  }
}
</style>
